<template>
  <a-modal
    v-model="visible"
    title="批量编辑物流运单"
    @ok="handleOk"
    cancelText="取消"
    okText="保存"
    width="836px"
    :confirm-loading="confirmLoading"
  >
    <a-table
      bordered
      size="small"
      :columns="columns"
      :data-source="batchTableData"
      :pagination="false"
      :scroll="{ x: 600 }"
    >
      <span slot="logisticsId" slot-scope="text, record">
        <a-select
          show-search
          placeholder="Select a person"
          option-filter-prop="children"
          style="width: 100px"
          :filter-option="filterOption"
          @change="handleChange"
          v-model="record.logisticsName"
        >
          <a-select-option
            :value="item.sysLogisticsId"
            v-for="item in record.itemTenants"
            :key="item.sysLogisticsId"
          >
            {{ item.logisticsPlatform }}
          </a-select-option>
        </a-select>
      </span>
      <span slot="waybillNo" slot-scope="text, record">
        <a-input  :maxLength="128" v-if="record.isEctn != '1'" v-model="record.waybillNo" />
        <a-input :maxLength="128"  v-if="record.isEctn === '1'" v-model="record.ectnNo" />
      </span>
      <span slot="waybillFile" slot-scope="text, record">
        <span   v-if="record.isEctn != '1'">
          <a
            target="_blank"
            v-if="record.waybillFile != null && record.waybillFile != ''"
            :href="record.waybillFile"
            >运单文件</a
          >
          <span v-else>暂无</span>
        </span>
        <span v-if="record.isEctn === '1'">
          <a
            target="_blank"
            v-if="record.ectnFile != null && record.ectnFile != ''"
            :href="record.ectnFile"
            >运单文件</a
          >
          <span v-else>暂无</span>
        </span>
      </span>
      <span slot="logisticsCost" slot-scope="text, record">
        <a-input :maxLength="128" v-model="record.logisticsCost" />
      </span>
    </a-table>
  </a-modal>
</template>

<script>
import {
  OutBound_batchOrder,
  OutBound_saveBatch,
} from "@/apis/system/WM/OutOrder";
export default {
  props:['getOutOrderList'],
  data() {
    return {
      visible: false,
      batchTableData: [],
      confirmLoading: false,
    };
  },
  mounted() {
    this.$bus.$off("OutOrderBatch");
    this.$bus.$on("OutOrderBatch", async (selectedKeys) => {
      let { code, responseBody } = await OutBound_batchOrder(selectedKeys);
      if (code === "10000") {
        this.batchTableData = responseBody;
        this.visible = true;
      }
    });
  },
  methods: {
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    handleOk() {
      this.confirmLoading = true;
      setTimeout(async () => {
        let { code } = await OutBound_saveBatch(this.batchTableData);
        if (code === "10000") {
          this.visible = false;
          this.confirmLoading = false;
          this.getOutOrderList();
        }
      }, 1000);
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
  computed: {
    columns() {
      return [
        {
          title: "客户编号",
          dataIndex: "tenantId",
          align: "center",
          width: "6%",
          ellipsis: true,
        },
        {
          title: "订单编号",
          dataIndex: "orderNumber",
          align: "center",
          ellipsis: true,
          width: "6%",
        },
        {
          title: "物流商",
          dataIndex: "logisticsId",
          scopedSlots: { customRender: "logisticsId" },
          align: "center",
          width: "6%",
          //   ellipsis: true,
        },
        {
          title: "运单号",
          dataIndex: "waybillNo",
          ellipsis: true,
          scopedSlots: { customRender: "waybillNo" },
          align: "center",
          width: "6%",
        },
        {
          title: "运单文件",
          dataIndex: "waybillFile",
          scopedSlots: { customRender: "waybillFile" },
          align: "center",
          width: "6%",
          //   ellipsis: true,
        },
        {
          title: "运费(USD)",
          dataIndex: "logisticsCost",
          scopedSlots: { customRender: "logisticsCost" },
          align: "center",
          width: "6%",
          //   ellipsis: true,
        },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
</style>